<template>
  <!-- 所属商户、销售商户、销售店铺的筛选 -->
  <el-select
    v-model="searchVal"
    v-bind="attribute"
    @change="$emit('change')"
    :remote-method="getOpt"
  >
    <el-option
      v-for="(item, i) in opt"
      :key="i"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>
<script>
// 通过 noPermission 参数来控制是否需要权限控制的商户列表
import request from '@/utils/request'
export default {
  props: {
    value: '',
    // 是否需要权限控制
    noPermission: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value (n) {
      this.searchVal = n
      this.$emit('input', n)
    },
    opt (n) {
      if (n?.length > 50) {
        this.opt.length = 50
      }
    },
    searchVal (n) {
      this.$emit('input', n)
    }
  },
  computed: {
    attribute () {
      return {
        clearable: true,
        filterable: true,
        remote: true,
        placeholder: '请输入商户名称',
        ...this.$attrs
      }
    }
  },
  data () {
    return {
      opt: [],
      searchVal: ''
    }
  },
  created () {
    this.getOpt('')
  },
  methods: {
    getOpt (name) {
      // 所属商户
      request({
        url: `/sot-admin-api/merchant/merchant/${
          this.noPermission ? 'queryListForNoPermission' : 'queryListForNoAuth'
        }`,
        method: 'post',
        data: {
          name
        }
      }).then(({ data }) => {
        this.opt = data
      })
    }
  }
}
</script>
